<template>
  <CDialog
    title="自动核算"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :loading="loading"
  >
    <el-form
      class="auto-accounting-form"
      ref="formRef"
      :rules="rules"
      :model="editForm"
      require-asterisk-position="right"
      label-position="top"
    >
      <el-form-item class="auto-accounting-form-item" label="可设定标准:" prop="standard">
        <CStandardRadioGroup v-model="editForm.standard" @change="handleScopeChange">
          <CStandardRadio
            class="standard"
            v-for="item in standardList"
            :label="item.scopeName"
            :desc="item.desc"
            :value="item.scope"
            :key="item.scope"
          ></CStandardRadio>
        </CStandardRadioGroup>
      </el-form-item>
      <!-- 循环业务列表 -->
      <template v-for="(item, index) in standardList" :key="index">
        <div class="checked-box" v-if="editForm.standard === item.scope">
          <div class="checked-box-title">
            <span class="title-text">{{ item.scopeName }}</span>
          </div>
          <el-form-item class="checked-box-body">
            <div class="checked-box-body__content">
              <div class="checked-box-body-title">GWP版本：</div>
              <el-radio-group v-model="item.productNo">
                <el-radio
                  v-for="(item_first, index_first) in item.optionalSubProduct"
                  :key="index_first"
                  :label="item_first.productNo"
                >
                  {{ item_first.productName }}
                </el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </div>
      </template>
    </el-form>
  </CDialog>
</template>
<script lang="ts" setup name="AutoAccountingDialog">
import { computed, withDefaults, defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { useMessage } from '@/hooks/useMessage';
import { CDialog } from '@/components/CDialog/index';
import { postTaskAccount } from '@/apis/eci/emissionAccounting/inventoryTask';
import type { PostTaskAccountParams } from '@/apis/eci/emissionAccounting/model/inventoryTaskModel';
import { CStandardRadio, CStandardRadioGroup } from '@/components/CStandardRadio/index';
import { CarbonInventoryStandardsMap, CarbonInventoryStandardsDescMap } from '@/constants/enum';
interface TaskAccountingDialogProps {
  visible: boolean;
  taskNo: string;
}
const props = withDefaults(defineProps<TaskAccountingDialogProps>(), {
  visible: false,
  taskNo: ''
});
const emit = defineEmits(['update:visible', 'refresh']);

const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});

const { createMessage } = useMessage();
const formRef = ref();
const loading = ref(false);
const standardList = ref<any[]>([]);
const editForm = reactive({
  standard: ''
});

const rules = reactive({
  standard: [
    {
      required: true,
      message: '请先选择标准',
      trigger: ['submit', 'change']
    }
  ]
});

// 提交出现二次弹窗
function handleConfirm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      let gwpVersion = '';
      for (let obj of standardList.value) {
        if (obj.scope === editForm.standard) {
          if (!obj.productNo) {
            createMessage.warning(`请选择${obj.scopeName}版本`);
            return;
          } else {
            gwpVersion = obj.productNo;
          }
        }
      }
      postTaskAccountReq(gwpVersion);
    }
  });
}

/**
 * 接口提交
 * @param gwpVersion
 */
async function postTaskAccountReq(gwpVersion: string) {
  const params: PostTaskAccountParams = {
    taskNo: props.taskNo,
    standard: editForm.standard as any,
    gwpVersion
  };
  loading.value = true;
  try {
    await postTaskAccount(params);
    console.log('params', params);
    createMessage.success('操作成功');
    dialogVisible.value = false;
    loading.value = false;
    emit('refresh');
  } catch (error) {
    loading.value = false;
    console.log('error', error);
  }
}

// 出现弹窗要进行页面初始化
watch(
  () => dialogVisible.value,
  val => {
    editForm.standard = '';
    standardList.value = [];
    if (val) {
      const optionalSubProduct = [
        {
          productName: 'IPCC第四次评估报告',
          productNo: 'AR4'
        },
        {
          productName: 'IPCC第五次评估报告',
          productNo: 'AR5'
        },
        {
          productName: 'IPCC第六次评估报告',
          productNo: 'AR6'
        }
      ];

      standardList.value = [
        {
          scope: 'ISO',
          scopeName: CarbonInventoryStandardsMap.ISO,
          desc: CarbonInventoryStandardsDescMap.ISO,
          productNo: 'AR6',
          optionalSubProduct
        },
        {
          scope: 'GB',
          scopeName: CarbonInventoryStandardsMap.GB,
          desc: CarbonInventoryStandardsDescMap.GB,
          productNo: 'AR4',
          optionalSubProduct
        },
        {
          scope: 'GHG',
          scopeName: CarbonInventoryStandardsMap.GHG,
          desc: CarbonInventoryStandardsDescMap.GHG,
          productNo: 'AR5',
          optionalSubProduct
        }
      ];
    }
  }
);
// 切换点击业务时要清空选项
const handleScopeChange = (val: string) => {
  // for (let obj of standardList.value) {
  //   if (!val.includes(obj.scope)) {
  //     obj.productNo = '';
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.auto-accounting-form {
  width: 632px;
  .standard {
    width: 204px;
  }
}

.checked-box {
  width: 100%;
  border: 1px solid #ebeff2;
  border-radius: 3px;
  .checked-box-title {
    padding: 6px 16px;
    width: 100%;
    height: 32px;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid #ebeff2;
    background-color: #f3f7fb;
    .title-text {
      font-size: 12px;
      font-weight: 600;
      color: #0a1f33;
      line-height: 20px;
    }
  }
  .checked-box-body {
    margin-bottom: 0;
    padding: 6px 16px;
    .checked-box-body__content {
      display: flex;
      .checked-box-body-title {
        padding-top: 5px;
        flex-shrink: 0;
        width: 92px;
        font-size: 14px;
        font-weight: 400;
        color: #435970;
        line-height: 22px;
      }
    }
  }
}
</style>
